<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../css/style.css">
</head>
<body>
  <div class="dashboard-container" id="category-app">
     <div class="container">
      <div
        class="tableBar"
        style="display: inline-block"
      >
        <el-button
          type="primary"
          class="continue"
          @click="addClass('goods')"
        >
          + 新增商品分类
        </el-button>
        <el-button
          type="primary"
          @click="addClass('meal')"
        >
          + 新增套餐分类
        </el-button>
      </div>
      <el-table
        :data="tableData"
        stripe
        class="tableBox"
      >
        <el-table-column
          prop="name"
          label="分类名称"
        /></el-table-column>
        <el-table-column
          prop="type"
          label="分类类型"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.type == '1' ? '商品分类': '套餐分类' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="操作时间"
        >
        <template slot-scope="scope">
         {{scope.row.updateTime}}
        </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="排序"
        /></el-table-column>
        <el-table-column
          label="操作"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="blueBug"
              @click="editHandle(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="text"
              size="small"
              class="delBut non"
              @click="deleteHandle(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog
      :title="classData.title"
      :visible.sync="classData.dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="分类名称：">
          <el-input
            v-model="classData.name"
            placeholder="请输入分类名称"
            maxlength="14"
          />
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="classData.sort"  type="number" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="medium"
          @click="classData.dialogVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          size="medium"
          @click="submitForm()"
        >确 定</el-button>
        <el-button
          v-if="action != 'edit'"
          type="primary"
          size="medium"
          class="continue"
          @click="submitForm('go')"
        > 保存并继续添加 </el-button>
      </span>
    </el-dialog>
  </div>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script src="../js/vue.js"></script>
  <script src="../plugins/elementui/index.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
    <script>
      new Vue({
        el: '#category-app',
        data() {
          return {
            action: '',
            counts: 0,
            page: 1,
            pageSize: 10,
            tableData: [],
            type :'',
            classData: {
              'title': '添加菜品分类',
              'dialogVisible': false,
              'categoryId': 0,
              'name': '',
              'sort': ''
            }
          }
        },
        created(){
             this.queryPage();
        },
        methods:{
            queryPage(){
              var param={
                currentPage:this.page,
                pageSize:this.pageSize,
                queryString:"",
              };
              axios.post("/category/queryPage",param).then((res)=>{
                this.counts=res.data.total;
                this.tableData=res.data.rows;
              });
            },
          addClass(classes){
              this.action='add';
              this.classData={
                'title': classes=="goods"?'添加商品分类':'添加套餐分类',
                'dialogVisible': false,
                'categoryId': '',
                'name': '',
                'sort': ''
              };//清空数据
              this.classData.dialogVisible=true;
              this.type=classes=="goods"?1:2;
          },
          submitForm(){
            var postData={
              id: this.classData.categoryId,
              name: this.classData.name,
              type:this.type ,
              sort: this.classData.sort,
            };
            if(this.action=='add'){
              axios.post("/category",postData).then((res)=>{
                if(res.data.flag){
                  this.$message.success(res.data.message);
                  this.classData.dialogVisible=false;
                }else {
                  this.$message.error(res.data.message);
                }
              })
            }else if(this.action=='edit'){
              axios.put("/category",postData).then((res)=>{
                if(res.data.flag){
                  this.$message.success(res.data.message);
                  this.classData.dialogVisible=false;
                }else {
                  this.$message.error(res.data.message);
                }
              })
            }
          },
          editHandle(data){
              this.action='edit';
              this.classData.title= data.type==0?'编辑商品分类':'编辑套餐分类';
              this.classData.name=data.name;
              this.classData.sort=data.sort;
              this.classData.categoryId=data.id;
              this.classData.dialogVisible=true;
          },
          deleteHandle(data){
             if(this.$confirm("是否确定删除!")){
             }
            this.$message("todo");
          }
        }
      })
    </script>
</body>
</html>